<template>
    <div class="list">
      <Header></Header>
      <div class="content" v-loading="loading">
        <div class="wrapper">
          <div class="page_title">{{ category.name }}</div>
          <div class="inner_content">
            <div class="articles">
              <ul v-if="articleData.total > 0">
                <li class="article" v-for="a in articleData.list" :key="a.id">
                  <div class="title" @click="toArticleHander(a)">
                    {{ a.title }}
                  </div>
                  <span>{{ a.publishTime | fmtTime }}</span>
                  &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
                  <span>阅读次数：{{ a.readTimes }}</span>
                </li>
              </ul>
              <div v-else style="text-align: center; color: red; padding: 2em">
                暂无文章
              </div>
            </div>
            <!-- 页码 -->
            <div class="page">
              <el-pagination
                background
                layout="prev,pager,next"
                hide-on-single-page
                @current-change="pageChangeHander"
                :page-size="articleData.pageSize"
                :total="articleData.total"
              >
              </el-pagination>
            </div>
          </div>
        </div>
      </div>
      <Footer></Footer>
    </div>
  </template>
  
  <script>
import Header from './components/Header.vue'
import Footer from './components/Footer.vue'
import { get } from './../utils/request'
  export default {
    components: { Header, Footer },
    data() {
      return {
        param: {
          page: 1,
          pageSize: 3,
        },
        articleData: {
          list: [],
        },
        category: {},
      };
    },
    methods: {
      loadArticle() {
        //this.loading=true;
        var url = "/index/article/pageQuery";
        this.param.categoryId = this.category.id;
        get(url, this.param)
          .then((resp) => {
            this.articleData = resp.data;
          })
          .finally(() => {
            //this.loading=false;
          });
      },
      toArticleHander(article) {
        this.$router.push({
          path: "articles",
          query: {
            id: article.id,
          },
        });
      },
      pageChangeHander(page) {
        this.param.page = page;
        this.loadArticle();
      },
    },
    watch: {
      //监听器、数据转变更新
      "$route.query": {
        handler(query) {
          this.category = query;
          this.loadArticle();
        },
      },
    },
    created() {
      //创建加载数据
      this.category = this.$route.query;
      this.loadArticle();
    },
  };
  </script>
  
  <style lang="scss">
  $color_primary: #3d9bf0;
  
  .list {
    .content {
      background-color: #fcfcfc;
      padding: 0.5em 0;
  
      .page_title {
        color: $color_primary;
        font-size: 18px;
        font-weight: bold;
        padding: 1em 0;
      }
  
      .inner_content {
        & > div {
          background-color: #fff;
          min-height: 200px;
          border-radius: 5px;
          padding: 1em 0.5em;
        }
  
        .articles {
          padding-right: 1em;
  
          ul > li.article {
            padding: 0.5em 0;
            border-bottom: 1px solid #ededed;
  
            & > div {
              line-height: 2em;
            }
  
            .title {
              cursor: pointer;
              font-size: 20px;
            }
  
            span {
              font-size: 10px;
              color: #595959;
            }
          }
        }
        .page {
          padding: 0.5em 0;
          text-align: center;
        }
      }
    }
  }
  </style>